<template>
  <div>
    <c-title class="circle_title" :hide="false" :text="'申请招商员'"></c-title>
    <div class="banner">
      <img src="../../../assets/images/enterprose_apply.jpg" />
    </div>
    <main class="main" v-if="check_list.length !== 0">
      <div class="apply_for">
        <img class="apply_img" src="../../../assets/images/apply_for_merchants.png" alt="" />
        <div class="merchants">申请招商员</div>
      </div>
      <div class="info">
        <div class="title line-h2">需要完成以下{{ condition_state == 1 ? "任意" : "全部" }}条件才能成为招商员：</div>
        <ul>
          <template v-if="check_list.length && check_list.includes(1)">
            <li class="c-343434 line-h2">1、点击申请招商员，等待后台确认审批。</li>
          </template>
          <template v-if="check_list.length && check_list.includes(2)">
            <li class="c-343434 line-h2">{{check_list.includes(1) ? '2' :'1'}}、请购买指定商品（购买一件即可）</li>
            <li class="line-h2 c-f1a540">
              <span v-for="(item, i) in goods_list" :key="i">
                {{ item.title }}、
              </span>
            </li>
          </template>
          <template v-if="check_list.length && check_list.includes(3)">
            <li class="c-343434">
              <div class="line-h2">{{check_list.includes(2) && check_list.includes(1)? '3' : check_list.includes(2) || check_list.includes(1) ? '2':'1'}}、请升级到以下等级（升级一个等级即可）：</div>

              <div class="line-h2" v-if="member_levels.length !== 0">
                会员等级：
                <span v-for="(item, i) in member_levels" :key="i">
                  {{ item.level_name }}
                </span>
              </div>

              <div class="line-h2" v-if="team_levels.length !== 0">
                经销商等级：<span v-for="(item, i) in team_levels" :key="i">
                  {{ item.level_name }}
                </span>
              </div>

              <div class="line-h2" v-if="commission_levels.length !== 0">
                分销商等级：<span v-for="(item, i) in commission_levels" :key="i">
                  {{ item.level_name }}
                </span>
              </div>
            </li>
          </template>
        </ul>
        <template v-if="check_list.length && check_list.includes(1)">
          <van-button :disabled="apply_state == 1 || apply_state == 2" :color="apply_state == 0 || apply_state == -1 ? '#ef3532' : '#867E7E'" @click="handle" round>{{ text }}</van-button>
        </template>
      </div>
    </main>
    <footer class="footer">
      <h2 class="mb-1">推广权限</h2>
      <div class="flex ali-center mb-1">
        <i class="iconfont icon-fontclass-erweima"></i>
        <div class="font-info">
          <div>专属二维码</div>
          <div class="tips">拥有专属推广二维码，用于推广客户</div>
        </div>
      </div>
      <div class="flex ali-center">
        <i class="iconfont icon-pay_yue "></i>
        <div class="font-info">
          <div>推广收入</div>
          <div class="tips">推广的客户购买商品后，您将获得相应的推广收入</div>
        </div>
      </div>
    </footer>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      text: "",
      condition_state: "",
      apply_state: 0,
      goods_list: [],
      member_levels: [],
      commission_levels: [],
      team_levels: [],
      check_list: []
    };
  },
  activated() {
    this.getData();
  },
  methods: {
    handle() {
      $http
        .post("plugin.area-merchant.frontend.modules.apply.controllers.store.index")
        .then(res => {
          if (res.result == 1) {
            Toast("已申请，等待后台审批");
            this.apply_state = 1;
          } else {
            Toast(res.msg);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    getData() {
      $http.post("plugin.area-merchant.frontend.modules.apply.controllers.page.index").then(res => {
        let data = res.data;
        if (res.result == 1) {
          this.condition_state = data.condition_state;
          this.goods_list = data.goods_list;
          this.check_list = data.check_list;
          this.member_levels = data.member_levels;
          this.commission_levels = data.commission_levels;
          this.team_levels = data.team_levels;
          this.apply_state = data.apply_state;
          if (data.apply_state == 0 || data.apply_state == 1 || data.apply_state == -1) {
            this.text = "申请招商员";
          } else if (data.apply_state == 2) {
            this.text = "已通过";
          }
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.left {
  text-align: left;
}

.tips {
  margin-top: 0.3rem;
  font-size: 0.8rem;
  color: #666;
}

.font-info {
  text-align: left;
}

.flex {
  display: flex;
}

.ali-center {
  align-items: center;
}

.info {
  text-align: left;

  .title {
    margin-top: 1rem;
    font-size: 0.8rem;
    color: #343434;
  }
}

i.iconfont {
  font-size: 1.6rem;
  border-radius: 2rem;
  width: 2.3rem;
  height: 2.3rem;
  line-height: 2.3rem;
  margin-right: 0.6rem;
}

i.icon-fontclass-erweima {
  background: #32cd32;
  color: #fff;
}

.mb-1 {
  margin-bottom: 1rem;
}

i.icon-pay_yue {
  background: #fece00;
  color: #fff;
}

.van-button {
  margin-top: 2rem;
  width: 100%;
}

.line-h2 {
  line-height: 2rem;
}

.c-343434 {
  color: #343434;
}

.c-f1a540 {
  color: #f1a540;
}

.banner {
  width: 100%;
  background: #fff;
  height: 100%;

  img {
    display: block;
    width: 100%;
  }
}

.footer {
  width: 22rem;
  background: #fff;
  margin: auto;
  margin-top: 1rem;
  padding: 1rem;
}

.main {
  width: 22rem;
  background: #fff;
  margin: auto;
  margin-top: 1rem;
  padding: 1rem;

  .apply_for {
    position: relative;
    height: 2rem;
    color: #fff;
  }

  .merchants {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .apply_img {
    width: 9rem;
    height: 2rem;
  }
}
</style>
